<template>
  <div id="app02">
    <goods-card v-for="(item, index) in goodsList" :goods="item" :key="index" />
  </div>
</template>

<script setup>
import GoodsCard from '@/components/GoodsCard.vue'
import goods01 from '@/assets/goods_img/goods01.png'
import goods02 from '@/assets/goods_img/goods02.png'
import goods03 from '@/assets/goods_img/goods03.png'
import { reactive } from 'vue'

let goodsList = reactive([
  {
    imgUrl: goods01,
    description: 'JANUS儿童羊毛内衣 秋冬保暖秋',
    price: 359.0,
    salesCount: '1000+',
  },
  {
    imgUrl: goods02,
    description: '心相印抽纸茶语纸巾面巾纸卫生纸',
    price: 3.8,
    salesCount: '100万+',
  },
  {
    imgUrl: goods03,
    description: '立白天然亮白洗衣液护色护衣薰衣',
    price: 11.9,
    salesCount: '7万+',
  },
])
</script>

<style scoped>
#app02 {
  display: flex;
}
</style>
